import 'package:flutter/material.dart';
import 'package:lucky_orbs/presentation/super_lotto/bloc/super_lotto_bloc.dart';
import 'package:lucky_orbs/presentation/super_lotto/bloc/super_lotto_event.dart';
import 'package:lucky_orbs/presentation/super_lotto/bloc/super_lotto_state.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class ResultDisplay extends StatelessWidget {
  final SuperLottoFinished state;
  const ResultDisplay({super.key, required this.state});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('开奖结果',
              style: TextStyle(fontSize: 28, color: Colors.white70)),
          const SizedBox(height: 20),
          _buildNumberRow('我的号码', state.userTicket.frontAreaNumbers,
              state.userTicket.backAreaNumbers, Colors.amber),
          const SizedBox(height: 15),
          _buildNumberRow('中奖号码', state.result.drawnFrontNumbers,
              state.result.drawnBackNumbers, Colors.cyanAccent),
          const SizedBox(height: 40),
          Text(
            state.prizeDescription,
            style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Color(0xFFF022A7)),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 40),
          ElevatedButton(
            onPressed: () => context.read<SuperLottoBloc>().add(ResetDrawing()),
            child: const Text('再来一次'),
          ),
        ],
      ),
    );
  }

  Widget _buildNumberRow(
      String title, List<int> front, List<int> back, Color color) {
    return Column(
      children: [
        Text(title,
            style: const TextStyle(fontSize: 18, color: Colors.white54)),
        const SizedBox(height: 8),
        Wrap(
          alignment: WrapAlignment.center,
          spacing: 4.0, // 水平间距 / Horizontal spacing
          runSpacing: 4.0, // 垂直间距 / Vertical spacing
          children: [
            ...front.map(
                (n) => _NumberCircle(number: n, isFront: true, color: color)),
            Container(
              width: 2,
              height: 20,
              color: Colors.white,
              margin: const EdgeInsets.symmetric(horizontal: 8),
            ),
            ...back.map(
                (n) => _NumberCircle(number: n, isFront: false, color: color)),
          ],
        ),
      ],
    );
  }
}

class _NumberCircle extends StatelessWidget {
  final int number;
  final bool isFront;
  final Color color;

  const _NumberCircle(
      {required this.number, required this.isFront, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 4),
      width: 40,
      height: 40,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: color, width: 2),
        boxShadow: [
          BoxShadow(
            color: color.withOpacity(0.7),
            blurRadius: 10,
            spreadRadius: 2,
          ),
        ],
      ),
      child: Center(
        child: Text(
          number.toString().padLeft(2, '0'),
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}
